<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09_$ref(s)的使用</title>
</head>
<!--
    ref: 是被用来给元素或子组件注册引用信息的,然后可以操作用的;
    refs: 引用信息将会注册在父组件的 $refs 对象上
    
    1、如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。
    2、如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。
-->

<body>
    <div id="app">
        <!-- ref 加在普通元素上，用 this.$refs.name 获取到的是当前dom元素 -->
        <input type="text" ref="ordinaryElement">
        <button @click="getOrdinaryElementRef">获取普通元素的 ref</button> <br>
        <testcomponent ref="componentElement"></testcomponent>
        <button @click="getComponentElementRef">获取组件的 ref</button>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    let testComponent = {
        template: '<h3>ref标题...</h3>'
    }

    const vm = new Vue({
        el: '#app',
        methods: {
            getOrdinaryElementRef() { //获取普通标签的 ref
                console.log(this.$refs.ordinaryElement) // 返回: <input type="text">
                this.$refs.ordinaryElement.value = "test";
            },
            getComponentElementRef() { //获取组件上的 ref
                console.log(this.$refs.componentElement) //返回对应的组件
            }
        },
        components: {
            'testcomponent': testComponent
        }
    })
</script>

</html>